<template>
    <div class='fxn-body'>
        <Searchs v-model:searchData="searchData" v-model:SearchForm="SearchForm" @handleSearch="handleSearch"></Searchs>
        <!-- Search End -->
        <div class="fxn-top" v-if="authMenu('sys_customer_add') || authMenu('sys_customer_import')">
            <el-button v-if="authMenu('sys_customer_add')" type="primary" icon="Plus" @click="handleOp(1)">添加</el-button>
            <el-button v-if="authMenu('sys_customer_import')" type="primary" icon="Plus" @click="handleImport">批量导入</el-button>
        </div>
        <!-- Top End -->
        <div class="fxn-section fixed fxn-margin-t-20">
            <el-table v-loading="loading" :data="listData">
                <el-table-column label="ID" prop="id" width="80" />
                <el-table-column label="客户名称" prop="name">
                    <template #default="scope">
                        <el-link type="primary" :underline="false" @click="handlePath(scope.row)">{{scope.row.name}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column label="客户电话" prop="phone" />
                <el-table-column label="跟进阶段" prop="follow_stage">
                    <template #default="scope">
                        {{$filter.followStage(scope.row.follow_stage)}}
                    </template>
                </el-table-column>
                <el-table-column label="案由" prop="business_type">
                    <template #default="scope">
                        {{$filter.businessType(scope.row.business_type)}}
                    </template>
                </el-table-column>
                <el-table-column label="信息来源" prop="info_source">
                    <template #default="scope">
                        {{$filter.infoSource(scope.row.info_source)}}
                    </template>
                </el-table-column>
                <el-table-column label="未跟进天数" prop="unfollow_days" />
                <el-table-column label="跟进人" prop="follow_with" />
                <el-table-column label="创建人" prop="create_with" />
                <el-table-column label="更新时间" prop="update_time">
                    <template #default="scope">
                        {{$filter.dateTime(scope.row.update_time,1)}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right">
                    <template #default="scope">
                        <el-link v-if="authMenu('sys_customer_edit')" type="primary" :underline="false" @click="handleOp(2,scope.row)">修改</el-link>
                        <el-link v-if="authMenu('sys_customer_follow')" type="primary" :underline="false" @click="handleLogs(scope.row)">添加跟进</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- Section End -->

        <div class="fxn-page fixed">
            <el-pagination v-model:current-page="page" v-model:page-size="perPage" :page-sizes="[10, 50, 100, 200, 500]" layout="total, sizes, prev, pager, next" :total="count" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
        <!-- Page End -->

        <!-- 操作 -->
        <dialogForm ref="dialogData" :formData="formData" @handleDialog="handleDialog"></dialogForm>
        <!-- 操作 End -->

        <!-- 批量导入 -->
        <dialogForm ref="dialogImport" :formData="importData" @handleDialog="handleSubmitImport"></dialogForm>
        <!-- 批量导入 End -->

        <!-- 添加跟进 -->
        <noteForm v-model:logDialog="logDialog" :staticData="staticData"></noteForm>
        <!-- 添加跟进 End -->
    </div>
</template>

<script>
    import Searchs from '../Common/Search.vue'
    import dialogForm from '../Common/Form.vue'
    import noteForm from './Common/noteForm.vue'
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        components: {Searchs,dialogForm,noteForm},
        setup() {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                count: 0,
                page: 0,
                perPage: 10,
                loading: false,
                listData: [],
                follow_method: computed(() => store.state.configEnable.follow_method),
                follow_stage: computed(() => store.state.configEnable.follow_stage),

                //搜索
                SearchForm: {
                    name: '',
                    phone: '',
                    follow_stage: '',
                    business_type: '',
                    info_source: '',
                    follow_with: '',
                    create_with: '',
                },
                searchData: [
                    {label: '客户名称', prop: 'name', type: 'input'},
                    {label: '客户电话', prop: 'phone', type: 'input'},
                    {label: '跟进阶段', prop: 'follow_stage', type: 'select', data: computed(() => store.state.configEnable.follow_stage), selectlabel: 'value', selectvalue: 'name'},
                    {label: '案由', prop: 'business_type', type: 'select', data: computed(() => store.state.configEnable.business_type), selectlabel: 'value', selectvalue: 'name'},
                    {label: '信息来源', prop: 'info_source', type: 'select', data: computed(() => store.state.configEnable.info_source), selectlabel: 'value', selectvalue: 'name'},
                    {label: '跟进人', prop: 'follow_with', type: 'input'},
                    {label: '创建人', prop: 'create_with', type: 'input'},
                ],

                //操作
                opType: 1,
                formData: {
                    inline: false,
                    width: '800',
                    labelWidth: '120',
                    data: [
                        {formType: 'input', span: 12, label: '客户名称', prop: 'name', rules: [{ required: true, message: '请输入客户名称', trigger: 'blur' }], placeholder: '请输入客户名称'},
                        {formType: 'input', span: 12, label: '手机号码', prop: 'phone', maxlength: '11', rules: [{ required: true, message: '请输入手机号码', trigger: 'blur' },{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }], placeholder: '请输入手机号码'},
                        {formType: 'select', span: 12, label: '跟进阶段', prop: 'follow_stage', data: computed(() => store.state.configEnable.follow_stage), rules: [{ required: true, message: '请选择跟进阶段', trigger: 'blur' }], selectlabel: 'value', selectvalue: 'name', placeholder: '请选择'},
                        {formType: 'select', span: 12, label: '案由', prop: 'business_type', data: computed(() => store.state.configEnable.business_type), rules: [{ required: true, message: '请选择案由', trigger: 'blur' }], selectlabel: 'value', selectvalue: 'name', placeholder: '请选择'},
                        {formType: 'select', span: 12, label: '信息来源', prop: 'info_source', data: computed(() => store.state.configEnable.info_source), rules: [{ required: true, message: '请选择信息来源', trigger: 'blur' }], selectlabel: 'value', selectvalue: 'name', placeholder: '请选择'},
                        {formType: 'select', span: 12, label: '跟进人', prop: 'follow_id', data: computed(() => store.state.userData), rules: [{ required: true, message: '请选择跟进人', trigger: 'blur' }], multiple: true, tags: true, selectlabel: 'real_name', selectvalue: 'id', placeholder: '请选择'},
                        {formType: 'input', type: 'textarea', rows: 5, label: '案件情况', prop: 'info', placeholder: '请输入案件情况'},
                        {formType: 'input', type: 'textarea', rows: 5, label: '备注', prop: 'remark', placeholder: '请输入备注'},
                    ]
                },

                //添加跟进
                logDialog: false,
                staticData: {
                    title: '添加跟进',
                    width: 800,
                    customer_id: '',
                },

                //批量导入
                importData: {
                    inline: false,
                    width: '800',
                    title: '批量导入',
                    labelWidth: '120',
                    data: [
                        {formType: 'down', label: '模板文件', prop: 'downfile', downUrl: '/template/customer.xlsx'},
                        {formType: 'file', label: '文件上传', prop: 'files', accept: '.xlsx', size: 200, limit: 1,},
                    ]
                },
            })

            //列表
            const getList = (page,perPage) => {
                state.loading = true;
                proxy.$http.get('/oa/Customer/index',{
                    page: page ? page : 1,
                    perPage: perPage ? perPage : 10,
                    name: state.SearchForm.name,
                    phone: state.SearchForm.phone,
                    follow_stage: (state.SearchForm.follow_stage ? String(state.SearchForm.follow_stage) : ''),
                    business_type: (state.SearchForm.business_type ? String(state.SearchForm.business_type) : ''),
                    info_source: (state.SearchForm.info_source ? String(state.SearchForm.info_source) : ''),
                    follow_with: state.SearchForm.follow_with,
                    create_with: state.SearchForm.create_with,
                })
                .then(res=> {
                    state.loading = false;
                    const { code, msg ,data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        state.count = data.count;
                        state.page = data.page;
                        state.perPage = data.perPage;
                        state.listData = data.list;
                    }
                })
            }

            //操作
            const handleOp = (type,row) => {
                state.opType = type;
                if(type == 1){
                    let array = state.formData.data;
                    array.forEach((item)=> {
                        if(item.prop == 'name'){
                            item.disabled = false
                        }
                        if(item.prop == 'phone'){
                            item.disabled = false
                        }
                        if(item.prop == 'follow_stage'){
                            item.disabled = false
                        }
                    })
                    state.formData.data = array;
                    state.formData = {
                        ...state.formData,
                        title: '添加客户',
                    }
                    proxy.$refs.dialogData.openDialog();
                }else{
                    let array = state.formData.data;
                    array.forEach((item)=> {
                        if(item.prop == 'name'){
                            item.disabled = true
                        }
                        if(item.prop == 'phone'){
                            item.disabled = true
                        }
                        if(item.prop == 'follow_stage'){
                            item.disabled = true
                        }
                    })
                    state.formData.data = array;
                    proxy.$http.get('/oa/Customer/cusForm',{id: row.id})
                    .then(res=> {
                        const { code, msg ,data } = res;
                        if(code != 1){
                            return proxy.$msg.error(msg);
                        }else{
                            data.follow_id = data.follow_id.split(',').map(Number);
                            state.formData = {
                                ...state.formData,
                                title: '编辑客户',
                                model: data
                            }
                            proxy.$refs.dialogData.openDialog();
                        }
                    })
                }
            }

            //提交操作
            const handleDialog = (e) => {
                let form = {
                    name: e.name,
                    phone: e.phone,
                    follow_stage: e.follow_stage,
                    business_type: e.business_type,
                    info_source: e.info_source,
                    info: e.info,
                    remark: e.remark,
                    follow_id: String(e.follow_id),
                }
                if(state.opType == 2){
                    form.id = e.id
                }
                proxy.$http.post('/oa/Customer/cusForm', form)
                .then(res=> {
                    const { code, msg ,data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        proxy.$msg.success('提交成功');
                        getList(state.page,state.perPage);
                    }
                })
            }

            //操作跟进
            const handleLogs = (row) => {
                state.staticData.customer_id = row.id;
                state.logDialog = true;
            }

            //提交跟进
            const handleLogSubmit = () => {
                getList(state.page,state.perPage);
            }

            //批量导入
            const handleImport = () => {
                proxy.$refs.dialogImport.openDialog();
            }

            //提交批量导入
            const handleSubmitImport = (e) => {
                //格式化附件
                let array = e.files;
                let files = [];
                if(e.files){
                    for (let index = 0; index < array.length; index++) {
                        files.push(array[index].url);
                    }
                }
                proxy.$http.post('/oa/Customer/import', {
                    file: String(files)
                })
                .then(res=> {
                    const { code, msg ,data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        proxy.$msg.success('提交成功');
                        window.location.reload();
                    }
                })
            }

            //跳转客户详情
            const handlePath = (row) => {
                router.push({path: '/CustomerDetail', query: {id: row.id, path: '/Customer'}})
            }

            //搜索
            const handleSearch = (e) => {
                state.SearchForm = e;
                getList(1,10);
            }

            //分页
            const handleSizeChange = (val) => {
                state.perPage = val;
                getList(state.page,state.perPage);
            }

            //页码
            const handleCurrentChange = (val) => {
                state.page = val;
                getList(state.page,state.perPage);
            }

            //获取权限
            const authMenu = (value) => {
                let currentRouter = router.currentRoute.value.path;
                let menuArr = (proxy.$public.authMenu(currentRouter).split(','));
                for (let index = 0; index < menuArr.length; index++) {
                    if(value == menuArr[index]){
                        return true
                    }
                }
            }
            
            //Dom加载
            onMounted(()=>{
                authMenu();
                getList();
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                getList,
                handleOp,
                handleDialog,
                handleLogs,
                handleLogSubmit,
                handleImport,
                handleSubmitImport,
                handlePath,
                
                //组件方法
                authMenu,
                handleSearch,
                handleSizeChange,
                handleCurrentChange,
            }

        },
    })
</script>

<style scoped>
    
</style>